<template>
    <view class="page">
        <uni-nav-bar background-color="#00a9ff" title="测评结果"
            color="white" :fixed="true" statusBar="true" left-icon="left" @clickLeft="back"/>
        <text class="welcome-text">
            您的测评结果为：心理测评分数：{{ score }}，{{ testResult }}
        </text>

        <button class="btn" @click="gotoDialogue" style="margin-top: 50rpx;">开始对话</button>
        <button class="btn" @click="saveResult" style="margin-top: 20rpx;">保存结果</button>
        <button class="btn" @click="fetchTestScores" style="margin-top: 20rpx;">显示所有成绩</button>

        <view v-if="allTestScores && allTestScores.length" style="margin-top: 20rpx;">
            <view v-for="score in allTestScores" :key="score.id" class="test-score-item">
                <text>Score: {{ score.score }}\n</text>
                <text>Category: {{ score.category }}\n</text>
                <text>Test Date: {{ formatDate(score.testDate) }}\n</text>
            </view>
        </view>
    </view>
</template>

<script>
import { getTestResult, saveTestScore, getAllTestScores } from '../../service/api.js';

export default {
    props: {
        id: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            score: null,
            testResult: null,
            category: null,
            allTestScores: []
        }
    },
    onLoad(options) {
        console.log(options.id);
        this.score = options.id;
        console.log(options.item);
        this.category = options.item;
        getTestResult(this.score, this.category)
            .then((data) => {
                this.testResult = data.result;
                console.log(this.testResult);
            })
            .catch((error) => {
                console.error("There was an error!", error);
            });
    },
    methods: {
        back() {
            uni.navigateBack()
        },
        gotoDialogue() {
            uni.navigateTo({
                url: "/pages/dialogue/dialogue",
            })
        },
        saveResult() {
            if (!this.score || !this.category || !this.testResult) {
                alert("Please complete the test result first.");
                return;
            }

            saveTestScore(this.score, this.category)
                .then((response) => {
                    console.log(response);
                    alert("Test result saved successfully!");
                })
                .catch((error) => {
                    console.error("There was an error!", error);
                });
        },
        fetchTestScores() {
            getAllTestScores()
                .then((data) => {
                    this.allTestScores = data;
                    console.log(this.allTestScores);
                })
                .catch((error) => {
                    console.error("There was an error!", error);
                });
        },
        formatDate(dateStr) {
            const date = new Date(dateStr);
            return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        }
    }
}
</script>

<style>
    .score-container {
        font-size: 24px;
        font-weight: bold;
    }

    .welcome-text {
		font-size: 18px;
		
		
    }

    .btn {
        width: 100%;
        height: 50px;
        background-color: #00a9ff;
        color: white;
        border: none;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
    }

    .test-score-item {
        margin: 10px;
        padding: 10px;
        border: 1px solid #ccc;
		font-size: 18px;
    }
</style>
